<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        position 属性
        position 属性规定应用于元素的定位方法的类型。
        有五个不同的位置值：
            static  HTML元素默认情况下的定位方式为 static（静态）。
            relative  相对于其正常位置进行定位。
            fixed    相对于视口定位的
            absolute
            sticky

        */
        div.static {
            position: static;
            border: 3px solid #73AD21;
            width: 100px;
            height: 100px;
            background-color: #00f;
        }
        .divImage{
            position: relative;
            z-index: 100;
        }

        div.relative {
            position: relative;
            border: 3px solid #73AD21;
            width: 100px;
            height: 100px;
            background-color: #F0F000;
            top: 100px;
            right: 50px;

        }

        div.fixed {
            position: fixed;
            top: 20px;
            left: 0;
            width: 300px;
            border: 3px solid #73AD21;
        }
        div.absolute {
            position: absolute;
            top: 0px;
            right: 0;
            width: 200px;
            height: 100px;
            border: 3px solid #73AD21;
            background-color: black;
        }

        div.absolute02 {
            position: absolute;
            top: 5px;
            left: 0;
            width: 50px;
            height: 50px;
            border: 3px solid #73AD21;
            background-color: #F0F000;
        }


        div.sticky {
            position: sticky;
            top: 0;
            background-color: green;
            border: 2px solid #4CAF50;
        }
    </style>
</head>
<body>
    <div class="static">1111111</div>

    <div class="sticky">
        我是有粘性的
    </div>
    <div class="relative">2222222</div>
    <div class="relative">2222222</div>
    <div class="relative">2222222</div>
    <div class="relative">2222222</div>
    <div class="relative">2222222</div>
    <div class="relative">2222222</div>
    <div class="fixed">66666666666</div>
    <div class="fixed">66666666666</div>

    <div class="absolute">

        <div class="absolute02">

        </div>


    </div>


    <div class="divImage">
        <img src="../img/3.png" alt="没有图片，我就出现....">


    </div>



</body>
</html>